<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <title>爱读书登陆注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="stylish Sign in and Sign up Form A Flat Responsive widget, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>

    <script type="application/x-javascript">
        function hideURLbar() {
            window.scrollTo(0, 1);
        }
        /*处理注册请求*/
        function checkoutRegister(e) {
            let parent = $(e).parent();
            let name = $(e).attr("name");
            let str = $(e).val();
            /*判断个个字符串是否符合正则表达式*/
            if (name == 'phone') {
                let regexp =/^1[3456789]\d{9}$/;
                if (regexp.test(str)) {
                    /*判断手机号码是否被注册过*/
                    $.post(
                        "/login/isRegister",
                        {'phone':str},
                        function (data) {
                            if (data.toString() == 'true'){
                                parent.find("i:eq(0)").remove();
                                parent.find("p:eq(0)").remove();
                                /*手机号码正确*/
                                $("<i class=\"sprite-press\"></i>").insertAfter(e);
                                return true;
                            }else {
                                parent.find("i:eq(0)").remove();
                                parent.find("p:eq(0)").remove();
                                $("<i class=\"sprite-error\"></i>\n" +
                                    "                <p class=\"error-tip\">该电话号码已注册</p>").insertAfter(e);
                                $(e).val('');
                                return false;
                            }
                        }
                    );
                } else {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-error\"></i>\n" +
                        "                <p class=\"error-tip\">请输入有效的电话号码</p>").insertAfter(e);
                    $(e).val('');
                    return false;
                }
            }else if (name == 'qq'){
                let regexp = /^[1-9][0-9]{4,10}$/;
                if (regexp.test(str)) {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-press\"></i>").insertAfter(e);
                    return true;
                } else {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $(e).val('');
                    $("<i class=\"sprite-error\"></i>\n" +
                        "                <p class=\"error-tip\">请输入正确QQ号</p>").insertAfter(e);
                    return false;
                }
            }else if (name == 'email'){
                let regexp = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                if (regexp.test(str)) {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-press\"></i>").insertAfter(e);
                    return true;
                } else {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-error\"></i>\n" +
                        " <p class=\"error-tip\">请输入符合规则的邮箱地址</p>").insertAfter(e);
                    return false;
                }

            }else if (name == 'beforePassword'){
                let regexp = /^[a-zA-Z]\w{5,17}$/;
                if (regexp.test(str)) {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-press\"></i>").insertAfter(e);
                    return true;
                } else {
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-error\"></i>\n" +
                        "                <p class=\"error-tip\">以字母开头，长度在6~18之间，只能包含字母、数字和下划线</p>").insertAfter(e);
                    return false;
                }

            }else if(name == 'afterPassword'){
                let beforePsw = $(".psw").val();
                if (str == ''){
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-error\"></i>\n" +
                        "                <p class=\"error-tip\">请输入再次输入密码</p>").insertAfter(e);
                    return false;
                }
                if (beforePsw == str){
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-press\"></i>").insertAfter(e);
                    return true;
                }else{
                    parent.find("i:eq(0)").remove();
                    parent.find("p:eq(0)").remove();
                    $("<i class=\"sprite-error\"></i>\n" +
                        "                <p class=\"error-tip\">两次密码不相同</p>").insertAfter(e);
                    return false;
                }
            }
        }
        /*处理登陆请求*/
        function checkoutLogin(e) {
            let parent = $(e).parent();
            //密码
            let password = parent.find("input:eq(1)").val();
            //账户
            let phone = parent.find("input:eq(0)").val();
            let flag = 1;
            /*判断电话号码和密码是否为空*/
            if (phone == '' || password == ''){
                $('.login-error-tip').remove();
                parent.prepend("<p class=\"login-error-tip\">账户或者密码不能为空</p>");
                return false;
            }

           $.post(
               "/login/doLogin",
               {'phone':phone,'password':password},
               function (data) {
                   if (data.data.toString() == '0'){
                       $('.login-error-tip').remove();
                       $('#login-form').submit();
                   }else {
                       $('.login-error-tip').remove();
                       parent.prepend("<p class=\"login-error-tip\">账户或者密码错误</p>");
                   }
               }
           );

        }
    </script>
    <link href="//fonts.googleapis.com/css?family=Sansita:400,400i,700,700i,800,800i,900,900i&amp;subset=latin-ext"
          rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
    <link href="/login/css/style.css" rel='stylesheet' type='text/css' media="all"/>
</head>
<body>

<h1><!--爱读书--></h1>
<div class="form-w3ls">
    <div class="form-head-w3l">
        <h2><a href="/"><img src="/login/images/8.png"></a></h2>
    </div>
    <ul class="tab-group cl-effect-4">
        <li class="tab active"><a href="#signin-agile">登陆</a></li>
        <li class="tab"><a href="#signup-agile">注册</a></li>
    </ul>
    <div class="tab-content">
        <div id="signin-agile">
            <!--登陆-->
            <form action="/login/sendLogin" method="post" id="login-form">
                <p class="header">手机号</p>
                <input type="text" name="phone" placeholder="Your telephone number"
                       required="required">
                <p class="header">密码</p>
                <input type="password" name="password" placeholder="Password" required="required">

                <input type="checkbox" id="brand" value="">
                <label for="brand"><span></span> 记住密码</label>
                <input type="button" class="sign-in"  onclick=checkoutLogin(this) value="登陆">
            </form>
        </div>

        <div id="signup-agile">
            <!--注册-->
            <form th:action="@{/login/doRegister}" method="post">
                <p class="header">电话号码</p>
                <div>
                <input type="text" name="phone" placeholder="Your Telephone Number"
                       onblur=checkoutRegister(this) required="required">
                </div>

                <p class="header">QQ</p>
                <div>
                <input type="text" name="qq" placeholder="QQ"
                       onblur=checkoutRegister(this) required="required">
                </div>
                <p class="header">密码</p>
                <div>
                <input class="psw" type="password" name="beforePassword" placeholder="Password"
                       onblur=checkoutRegister(this) required="required">
                </div>

                <p class="header">确认密码</p>
                <div>
                <input type="password" name="afterPassword" placeholder="Confirm Password"
                       onblur=checkoutRegister(this) required="required">
                </div>
                <input type="submit" class="register" value="注册">
            </form>
        </div>
    </div>
</div>

<!-- /form -->
<p class="copyright">&copy; 2018 stylish sign in and sign up Form. All Rights Reserved | Design by <a
        href="https://w3layouts.com/" target="_blank">Misskun</a></p>
<!-- js files -->
<script src='/login/js/jquery.min.js'></script>
<script src="/login/js/index.js"></script>
<!-- /js files -->
</body>
</html>
